<%--
  Created by IntelliJ IDEA.
  User: lxj
  Date: 2021/5/26
  Time: 17:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>

<%--引入jstl标签,这个不算在线引入,在pom中还要引入依赖--%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>用户信息管理系统</title>


    <!--引入 Bootstrap  和 jquery   需要联网-->
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <style type="text/css">
        #tab2{
            margin:  auto;
        }
    </style>

</head>
<body>


<div  id="tab">
    <p style="text-align: center;color: crimson" >示例图片（不可下载）</p>
    <%--站在浏览器的角度找图片--%>
    <p style="text-align: center"> <img style="margin-bottom: 20px;width: 700px;height: 450px" src="http://localhost:8080/wenjianup/image/1.jpg" alt=""> <br></p>

    <%--站在服务器的角度找图片--%>

    <%--2和3同级别 但是3找不到 因为2在配置文件中有这么一句配置 <mvc:resources location="/resources/image/" mapping="/image/**" cache-period="604800"/>--%>
    <%--而且映射后  原路径  /wenjianup/resources/image/2.jpg  反而找不到了  只能使用映射路径  这个可以提供安全性--%>
    <p style="text-align: center"> <img style="margin-bottom: 35px;width: 250px;height: 300px" src="/wenjianup/image/2.jpg" alt=""></p>


    <%--<p > <img  src="/wenjianup/image3/3.jpg" alt=""></p>--%>

    <p style="text-align: center"> <img style="margin-bottom: 20px;width: 700px;height: 450px" src="${pageContext.request.contextPath}/image/1.jpg" alt=""> <br></p>


    <%--同理--%>
    <p style="text-align: center"> <img  style="margin-bottom: 20px;width: 280px;height: 360px" src="http://localhost:8080/wenjianup/images/3.jpg" alt=""></p>
    <p style="text-align: center"> <img style="margin-bottom: 20px;width: 700px;height: 550px" src="../images/4.jpeg" alt=""></p>
</div>

<p style="text-align: center"><button id="btn" >查询数据库可下载图片</button> </p>
<div  id="tab2"  >

    <script>
        $(function () {
            $("#btn").click(function () {//对button添加一个点击事件
                $.ajax({
                    url:"${pageContext.request.contextPath}/wenjian/showAll",
                    type:"post",
                    success:function (data) {
                        var str="";
                        for (var i = 0; i < data.length; i++) {
                            var file=data[i];
                            str+='<p style="text-align: center"><img style="margin-bottom: 20px;width: 700px;height: 300px" class="product__image" src="'+file.url+'" alt="Product 1" /></p>';
                        }
                        $("#tab2").html(str);
                    }
                })
            })

        })
    </script>


    <script>
        $(function () {

                $.ajax({
                    url:"${pageContext.request.contextPath}/wenjian/showAll",
                    type:"post",
                    success:function (data) {
                        var str="";
                        for (var i = 0; i < data.length; i++) {
                            var file=data[i];
                            str+='<p style="text-align: center"><img style="margin-bottom: 20px;width: 700px;height: 300px" class="product__image" src="'+file.url+'" alt="Product 1" /></p>';
                        }
                        $("#tab2").html(str);
                    }
                })
            })

    </script>

</div>
<br><br><br>

<div style="text-align: center;height: 100px">
    <a href="${pageContext.request.contextPath}/wenjian/finddownload">下载界面</a>

</div>


</body>
</html>
